﻿@using System.Linq
@using CML.Intercamber.Business
@{
    ViewBag.PageTitle = Resources.Intercamber.Translations_PageName;
}
@section PageHead
{
    <style>
        .tipWidth
        {
            max-width: 500px !important;
        }
    </style>
    <script type="text/javascript">
        var listTranslationsManager = new function () {

            this.init = function () {
                $("#gridTranslations").jqGrid({
                    //autowidth: true,
                    datatype: 'json',
                    width: '100%',
                    height: '100%',
                    jsonReader: { 'repeatitems': false, 'id': 'IdTranslationHistory' },
                    loadonce: true,
                    url: '/Talk/TranslationsData',
                    viewrecords: true,
                    colModel: [
                        { name: 'IdTranslationHistory', hidden: true },
                        { name: 'IdLanguage', hidden: true },
                        { name: 'Word', hidden: true },
                        { name: 'Starred', hidden: true },
                        { name: 'IdTranslationHistory', fixed: true, formatter: listTranslationsManager.gridColumnDel, label: '@Resources.Intercamber.Delete', resizable: false, sortable: false, width: 45, index: 'IdTranslationHistory', align: 'center' },
                        { name: 'StrDate', label: '@Resources.Intercamber.Date', align: 'center', width: 100 },
                        { name: 'LblLanguage', label: '@Resources.Intercamber.Language', align: 'center', width: 100 },
                        { name: 'Word', label: '@Resources.Intercamber.Text', align: 'center', width: 150 },
                        { name: 'ViewTranslation', fixed: true, formatter: listTranslationsManager.gridColumnView, label: '@Resources.Intercamber.ViewTranslation', resizable: false, sortable: false, width: 90, index: 'IdTranslationHistory', align: 'center' },
                        { name: 'Starred', fixed: true, formatter: listTranslationsManager.gridColumnStar, label: '@Resources.Intercamber.Favorite', resizable: false, width: 45, align: 'center' },
                    ],
                    subGrid: false,
                    loadComplete: function () {
                        $("#gridTranslations").jqGrid('setGridWidth', 800, true);
                    },
                }).trigger("reloadGrid", [{ page: 1 }]);
            };

            this.reloadGrid = function () {
                $("#gridTranslations").jqGrid().setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
            };

            this.gridColumnView = function (cellvalue, options, rowobject) {
                return "<img title=\"\" class='imgButton' src='/Images/Translate.png' onclick=\"translatorManager.setLanguage('" + rowobject.IdLanguage + "'); translatorManager.showTranslatorFrame('" + rowobject.Word.replace("\"", "").replace("'", "") + "')\" />";
            };

            this.gridColumnDel = function (cellvalue, options, rowobject) {
                return "<img title=\"\" class='imgButton' src='/Images/Delete.png' onclick=\"listTranslationsManager.delete('" + cellvalue + "', " + rowobject.Starred + ")\" />";
            };

            this.gridColumnStar = function (cellvalue, options, rowobject) {
                var img = "/Images/Star" + (rowobject.Starred ? "On" : "Off") + ".png";
                return "<img title=\"\" class='imgButton' src='" + img + "' onclick=\"listTranslationsManager.changeStar('" + rowobject.IdTranslationHistory + "', this)\" />";
            };

            this.delete = function (id, isStar) {
                if (isStar && !confirm("@Resources.Intercamber.Translations_ConfirmDeleteTranslation"))
                    return;
                $.ajax({
                    type: "POST",
                    url: "/Talk/DeleteTranslation",
                    contentType: "application/json; charset=utf-8",
                    data: "{'id':\"" + id + "\"}",
                    dataType: "json",
                    success: function (result) {
                        if (result == true)
                            listTranslationsManager.reloadGrid();
                        else
                            alert("error: " + result);
                    },
                    error: function (result) {
                        debugger;
                    }
                });
            };

            this.changeStar = function (id, img) {
                var dimg = $(img);
                var src = dimg.attr("src");
                var toggled = src == "/Images/StarOn.png";
                $.ajax({
                    type: "POST",
                    url: "/Talk/ToggleTranslationStar",
                    contentType: "application/json; charset=utf-8",
                    data: "{'id':\"" + id + "\", 'starred':" + (toggled ? "false" : "true") + "}",
                    dataType: "json",
                    success: function (result) {
                        if (result == true)
                            dimg.attr("src", "/Images/Star" + (!toggled ? "On" : "Off") + ".png");
                        else
                            alert("error: " + result);
                    },
                    error: function (result) {
                        debugger;
                    }
                });
            };

        };


        $(function () {
            $(".jqbutton").button();
            listTranslationsManager.init();
            translatorManager.init("@(((Users)ViewBag.ConnectedUserInfo).UsersLearnLanguages.FirstOrDefault().IdLanguage)", "@ViewBag.UiLanguage", true);
            translatorManager.onAfterLog = listTranslationsManager.reloadGrid;
        });

    </script>
}

@section PageLeftBar {
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}

@section PageContent {

    <div class="innerTitle ui-corner-all">
        @Resources.Intercamber.Translations_PageName
    </div>
    <br />
    <br />
    <div>
        @Resources.Intercamber.Translations_SearchAnotherWord (@(Resources.Intercamber.ResourceManager.GetString("Languages_" + ((Users)ViewBag.ConnectedUserInfo).UsersLearnLanguages.FirstOrDefault().IdLanguage)))
        @Html.Partial("~/Views/Shared/_TranslatorPartial.cshtml")
    </div>
    <br />
    <table id="gridTranslations" style="width: 100%"></table>

}
